<template>
    <div>
        <div class="cswd-search">
            <div class="search">
                <img
                    src="~/assets/images/csjh/cswd-logo.png"
                    class="search-text"
                    alt=""
                />
                <div class="search-input">
                    <el-input
                        v-model="searchInput"
                        class="search-input-el"
                        maxlength="60"
                        placeholder="请输入内容"
                        @keyup.native.enter="serch()"
                    ></el-input>
                    <el-button class="but" type="primary" @click="serch">
                        搜索
                    </el-button>
                </div>
            </div>
            <div class="list" v-loading="loading">
                <div class="count">
                    共搜索到 <span>{{ total }}</span> 条相关结果
                </div>
                <nuxt-link
                    v-for="(item, index) in dataList"
                    :key="index"
                    :to="`/cswd/${item.id}.html`"
                    target="_blank"
                    class="item"
                >
                    <div class="title" v-html="item.title"></div>
                    <!-- <div class="content">
                        
                    </div> -->
                </nuxt-link>
                <div class="page">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="total"
                        :page-size="limit"
                        :current-page.sync="page"
                        @current-change="changePage"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { goTopSmooth, hightLightText } from "@/assets/utils/utils";
import { new_xungetsearch } from "@/assets/api/csjhApi.js";
import { getanalysedata } from "@/assets/api/indexApi";
export default {
    components: {},
    layout: "home",
    head() {
        return {
            title: "小竹财税问答-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税问答,财税问答",
                },
                {
                    hid: "description",
                    name: "description",
                    content:
                        "小竹财税问答栏目汇集众多税专家及财税专业导师，他们在财税领域有着丰富的实践经验和深厚的理论功底，能够及时准确的为广大财税从业者和学习者提供专业答疑服务。",
                },
            ],
        };
    },
    data() {
        return {
            searchInput: "",
            total: 0,
            limit: 10,
            page: 1,

            loading: false,

            dataList: [],
        };
    },
    watch: {
        $route(n, o) {
            if (n) {
                this.searchInput = n.query.k;
                this.page = 1;
                this.getList();
            }
        },
    },
    mounted() {
        this.searchInput = this.$route.query.k;
        this.getList();
        getanalysedata({
            m_id: 4,
            type: 1,
            describe: this.searchInput,
            code: "PC8",
        });
    },
    computed: {},
    methods: {
        async getList() {
            this.loading = true;
            const res = await new_xungetsearch({
                keyword: this.searchInput,
                type: "xiaozhuwenda",
                page: this.page,
                limit: this.limit,
            });

            if (res.code == 1) {
                this.total = res.data.count;
                this.dataList = res.data.list;
                for (let item of this.dataList) {
                    item.title = hightLightText(item.title, this.searchInput);
                }
                goTopSmooth();
            }
            this.loading = false;
        },
        changePage(page) {
            this.page = page;
            this.getList();
        },
        serch() {
            this.$router.push({
                path: "/cswd/search",
                query: {
                    k: this.searchInput,
                },
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.cswd-search {
    width: 1200px;
    margin: 30px auto;
    .search {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .search-text {
            width: 156px;
            height: auto;
        }
    }

    .search-input {
        &::v-deep .el-input__inner {
            height: 57px;
            border-radius: 4px 0 0 4px;
            border: 2px solid #1c87f3;
        }
        .search-input-el {
            width: 860px;
        }
        .but {
            width: 133px;
            height: 57px;
            border-radius: 0px 4px 4px 0px;
        }
    }
    .list {
        background: #ffffff;
        border: 1px solid #f1f1f1;
        padding: 0 40px 50px;
        margin-top: 27px;
        .count {
            font-size: 16px;
            font-family: Source Han Sans, Source Han Sans;
            color: #999999;
            line-height: 66px;
            border-bottom: 1px solid #e4e4e4;
            span {
                color: #333333;
            }
        }
        .item {
            display: block;
            box-sizing: border-box;
            padding: 25px 11px;
            border-bottom: 1px solid #e4e4e4;
            cursor: pointer;
            &:hover {
                .title {
                    color: #1c87f3;
                    text-decoration: underline;
                }
            }
            > div {
                -webkit-line-clamp: 2;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .title {
                font-size: 16px;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 500;
                color: #222222;
                line-height: 24px;
            }
            .content {
                margin-top: 10px;
                font-size: 14px;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 400;
                color: #666666;
                line-height: 22px;
            }
        }
    }

    .page {
        margin-top: 37px;
        text-align: center;
    }
}
</style>./search.vue
